<template>
	<div>
		<div class="css-canvs" ref="refCon"></div>
		<van-overlay :show="showLoading">
			<div class="loadingPos">
				<van-loading size="24px" vertical>加载中</van-loading>
			</div>
		</van-overlay>
	</div>
</template>

<script>
	import {
		getBaseUrl
	} from '@/util/env';
	import * as THREE from 'three';
	import {
		TWEEN
	} from 'three/examples/jsm/libs/tween.module.min.js';
	import {
		OrbitControls
	} from 'three/examples/jsm/controls/OrbitControls';
	import {
		loadGLTFModel
	} from '../lib/model'
	import {
		onMounted
	} from 'vue';
	export default {
		data() {
			return {
				showLoading: false,
				GLBs: [{
						name: "EXT",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_EXT_d.glb",
					},
					{
						name: "INT",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_INT_d.glb",
					},
					{
						name: "Sunproof",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_Sunproof_d.glb",
					},
					{
						name: "Trunk",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_Trunk_d.glb",
					},
					{
						name: "Tires",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_Tires_d.glb",
					},
					{
						name: "LBDoor",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_LBDoor_d.glb",
					},
					{
						name: "LFDoor",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_LFDoor_d.glb",
					},
					{
						name: "RFDoor",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_RFDoor_d.glb",
					},
					{
						name: "RBDoor",
						path: getBaseUrl() +
							"/dev-api/profile/avatar/2023/12/23/static/data/lynkco09/model/Lynkco09_RBDoor_d.glb",
					},
				],
				controls: null,
				camera: null,
				scene: [],
				models: [],
				tweenCollection: {
					LBDoor: {
						tween: null,
						from: {
							value: null,
						},
						to: {
							value: null,
						},
					},
					RBDoor: {
						tween: null,
						from: {
							value: null,
						},
						to: {
							value: null,
						},
					},
					LFDoor: {
						tween: null,
						from: {
							value: null,
						},
						to: {
							value: null,
						},
					},
					RFDoor: {
						tween: null,
						from: {
							value: null,
						},
						to: {
							value: null,
						},
					},
					Trunk: {
						tween: null,
						from: {
							value: null,
						},
						to: {
							value: null,
						},
					},
				},
				refRenderer: {
					current: null,

				}
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			easeOutCirc(x) {
			  return Math.sqrt(1 - Math.pow(x - 1, 4));
			},
			init() {
				this.showLoading = true;
				const canvs = document.getElementsByClassName("css-canvs")[0];

				if (canvs) {
					this.showLoading = false;
					const canvsW = canvs.clientWidth;
					const canvsH = canvs.clientHeight;

					const renderer = new THREE.WebGLRenderer({
						antialias: true,
						alpha: true,

					});

					renderer.setPixelRatio(window.devicePixelRatio);
					renderer.setSize(canvsW, canvsH);
					renderer.outputEncoding = THREE.sRGBEncoding;

					canvs.appendChild(renderer.domElement);
					this.refRenderer.current = renderer

					// 创建3D场景
					this.scene = new THREE.Scene();

					const target = new THREE.Vector3(-0.5, 0.5, 0);

					const initialCameraPosition = new THREE.Vector3(
						5 * Math.sin(0.2 * Math.PI),
						2.5,
						5 * Math.cos(0.2 * Math.PI)
					);
					// 创建相机并设置位置和角度
					this.camera = new THREE.PerspectiveCamera(40, canvsW / canvsH, 0.1, 1000);
					this.camera.position.copy(initialCameraPosition);
					this.camera.lookAt(target);
					// 创建相机控件（缩放、平移、旋转）
					this.controls = new OrbitControls(this.camera, renderer.domElement);


					// 添加灯光
					const light1 = new THREE.DirectionalLight(0xffffff, 0.2);
					light1.position.set(0, 0, 10);
					this.scene.add(light1);
					const light2 = new THREE.DirectionalLight(0xffffff, 0.2);
					light2.position.set(0, 0, -10);
					this.scene.add(light2);
					const light3 = new THREE.DirectionalLight(0xffffff, 0.2);
					light3.position.set(10, 0, 0);
					this.scene.add(light3);
					const light4 = new THREE.DirectionalLight(0xffffff, 0.2);
					light4.position.set(-10, 0, 0);
					this.scene.add(light4);

					const light5 = new THREE.DirectionalLight(0xffffff, 0.2);
					light5.position.set(0, 10, 0);
					this.scene.add(light5);
					const light6 = new THREE.DirectionalLight(0xffffff, 0.2);
					light6.position.set(5, 10, 0);
					this.scene.add(light6);
					const light7 = new THREE.DirectionalLight(0xffffff, 0.2);
					light7.position.set(0, 10, 5);
					this.scene.add(light7);
					const light8 = new THREE.DirectionalLight(0xffffff, 0.2);
					light8.position.set(0, 10, -5);
					this.scene.add(light8);
					const light9 = new THREE.DirectionalLight(0xffffff, 0.2);
					light9.position.set(-5, 10, 0);
					this.scene.add(light9);

					Promise.all(
						this.GLBs.map((item) =>
							loadGLTFModel(this.scene, item, this.refRenderer, {
								receiveShadow: false,
								castShadow: false,
							})
						)
					).then((res) => {
						this.models = res;
						console.log(res)
						animate();
						this.showLoading = false;
					});
					const animate = () => {
						this.controls.update()
						requestAnimationFrame(animate);
						
						renderer.render(this.scene, this.camera);
					};
				} else {
					this.showLoading = false;
				}
			}
		}
	}
</script>

<style>
	.css-canvs {
		width: 100%;
		height: 220px;
		position: relative;
	}

	.loadingPos {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}
</style>